<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
header{
    width: auto;
    height: 26px;
    position: relative!important;
    background: #f2f2f2;
    z-index: 99999;
    -webkit-transform: translate3d(0,0,0);
    border-bottom: 1px solid #e5e5e5;
}
.sn-container {
    height: inherit;
    width: 990px;
    margin: 0 auto;
}
.content{
    width: 990px;
    height: 700px;
    overflow-y: scroll;
    margin: 10px auto;
}
.container{
    width: 100%;

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
tbody td{
    text-align: center;
    
}
input[type="checkbox"]{
    cursor: pointer;
    
}
.btn input[type="number"]{
    text-align: center;
    width: 30px;
    
}
.imgs img{
    height: 120px;
    height: 100px;
}
.footer{
    width: 990px;
    margin: 20px auto;
    border: 1px solid #ccc;
}
.footer p{
    padding: 10px;
}
.footer p span{
    color: red;
    font-weight: bold;
}

.shpping{
    float: right;
    outline: none;
    cursor: pointer;
    padding: 7px 22px;
    background-color: orangered;
    border: none;
    color: #fff;
}
.btn button{
    padding: 0px 10px;
    cursor: pointer;
}
.del:active{
    background-color:#FF0036 ;
}
.pro{
    display: flex;
    justify-content: space-between;
}
.del{
    padding: 6px 15px;
    outline: none;
    cursor: pointer;
    color: #fff;
    background-color: rgb(240, 76, 76);
    border: none;
    border-radius: 5px;
}
.active{
    background-color: sandybrown !important;
}
</style>
<body>
    <header>
        <div class="sn-container">

        </div>

    </header>
    <div class="content">
        <table class="container" border="1" style="border-color: #eee;"  cellspacing="0">
            <thead>
                <th><input type='checkbox' class="checkAll"></th>
                <th>id</th>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </thead>
    
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="footer">
        <div class="pro">
            <p>商品总价格：<span>￥</span><span class="totprice">111</span></p>
            <p>已选商品数量<span class="produc_count" style="padding: 0 10px;">1</span>件</p>
        <button class="shpping">立即购买</button>
        </div>
    </div>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
 <script>
    let goodslist=[
      {
        id:1,
        img:'./img/mzp.jpg',
        name:'憨憨猫抓板',
        price:41.9,
        money:41.9,
        count:1,
        checked:false
      },
      {
        id:2,
        img:'./img/zxw.jpg',
        name:'猫咪造型窝',
        price:260,
        money:130,
        count:2,
        checked:true
      },
      {
        id:3,
        img:'./img/mdg.jpg',
        name:'猫冻干零食',
        price:75,
        money:75,
        count:1,
        checked:false
      }, {
        id:4,
        img:'./img/hhdg.jpg',
        name:'憨憨冻干大礼包',
        price:69,
        money:69,
        count:1,
        checked:true
      },
      {
        id:5,
        img:'./img/bb.jpg',
        name:'憨憨外出背包',
        price:55,
        money:55,
        count:1,
        checked:false
      
      }
    ]

    function newlist(){
        let list
    goodslist.forEach((item,index)=>{
    item.checked=item.checked?'checked':''
    list+=`
    <tr class="tr${item.id}">
            <td><input class="check" onclick="checkwhy(${item.id})" type='checkbox' ${item.checked}></td>
            <td>${item.id}</td>
            <td class="imgs">
                 <img src="${item.img}" alt="">
            </td>    
            <td>${item.name}</td>
            <td>￥${item.price}</td>
            <td class="btn">
                <button onclick=subtraction(${item.id})>-</button><input type="number" value="${item.count}"><button onclick="add(${item.id})">+</button>
            </td>
            <td>
                <button class="del" onclick="del(${item.id})">删除</button>
            </td>
           </tr>
    `
    $('tbody').html(list)
  })
let allcheck=document.querySelectorAll('.check')
 allcheck.forEach((item,index)=>{
     item.setAttribute('id',goodslist[index].id)
     
    //  判断选中check的添加类
    let addcheck=goodslist.filter(item=>{ return item.checked!=false})
    addcheck.forEach(item=>{ $(`.tr${item.id}`).addClass('active')})
 })
    }
    newlist()
  //总额计算
  function conuntMoney(){
    let totalmoney=0;
        let good= goodslist.filter(item=>{
            return item.checked
        })
        console.log(good)
        good.forEach(res=>{
            totalmoney+=(res.money*res.count)
        })

    $('.totprice').text(totalmoney)
  }
  conuntMoney()

  let isAll=false
//   全选
  $('.checkAll').click(function(){
      let mes=this
     goodslist.forEach((checkAlls,index)=>{
         checkAlls.checked=mes.checked
            let checked=document.querySelectorAll('.check');
            checked[index].checked=mes.checked
            if(mes.checked){
                $('.check').attr('checked')
            }
             })
     conuntMoney()
     newlist()
  })
//   加数量
  function add(id){
     let good=goodslist.find(res=> res.id==id)
     
     good.count+=1
     if(good.count>10) good.count=10;
     good.price=(good.money*good.count).toFixed(2)
     conuntMoney()
     newlist()
    
  }
//   减少数量
  function subtraction(id){
    let good=goodslist.find(res=> res.id==id)
   
     good.count-=1
     if(good.count<1) good.count=1;
     good.price=(good.money*good.count).toFixed(2)
     conuntMoney()
     newlist()
     
  }

 function checkwhy(e){
        let desc= goodslist.find(res=>{
          return res.id==e
      })
      desc.checked=!desc.checked
      console.log(desc.checked)
     let allNewcheck=goodslist.every(res=>{return res.checked })
     $('.checkAll').prop('checked',allNewcheck)  
      conuntMoney()
      newlist()
  }

  function del(e){
    let goodse= goodslist.filter(res=>{
        return e!=res.id
     })
     console.log(goodse)
     goodslist=goodse
     conuntMoney()
     newlist()
  }
 </script>
</body>
</html>